<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import navbar from "@/components/navbar/navbar.vue";
import { onPageScroll } from "@dcloudio/uni-app";
import { router, toast } from "@/utils/tools";
import { apiPublishGoods } from "@/apis/goods";
import { uploadImg } from "@/utils/request";
import { mapStores } from "pinia";
import { apiProductDict } from "@/apis/product";
import { onLoad } from "@dcloudio/uni-app";
import { useUserStore } from "@/stores/user";
import { onShow } from "@dcloudio/uni-app";
import { onReady } from "@dcloudio/uni-app";
import { getToken } from "@/utils/auth";
import { uniChooseMedia } from "@/utils/uniToos";
import { isImg } from "@/utils/tools";
import cache from "@/utils/cache";
import {
  commodityCollectionList,
  commodityAddCollection,
  commodityEditCollection,
  commodityRemoveCollection,
} from "@/apis/collectionCertification";
import { onReachBottom } from "@dcloudio/uni-app";

const userStore = useUserStore();
const pageNum = ref(1);
const pageSize = ref(10);
const isMore = ref(false);
const list: any = ref([]);

const getList = async () => {
  const res = await commodityCollectionList({
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  });

  if (res.code === 200) {
    list.value.push(...res.rows);
    if (res.rows.length < 10) {
      isMore.value = true;
      return;
    }
    pageNum.value++;
  }
};

const getStatusInfo = (state) => {
  if (state === 0 || state === 2) {
    return {
      color: "#FF6430",
      text: "审核中",
    };
  }
  if (state === 1) {
    return {
      color: "#28AA91",
      text: "审核通过",
    };
  }

  if (state === 3) {
    return {
      color: "#FF3A30",
      text: "审核失败",
    };
  }
};

const handleBtnShow = (state) => {
  // 1.审核通过： 不显示编辑按钮，显示删除
  // 2.审核失败： 显示编辑、删除  显示失败原因
  // 3.审核中 显示编辑 显示删除按钮
  if (state === 1) {
    return {
      edit: false,
      del: true,
    };
  }
  if (state === 2 || state === 0) {
    return {
      edit: true,
      del: true,
    };
  }
  if (state === 3) {
    return {
      edit: true,
      del: true,
    };
  }
};

const getReasonPrefix = (state) => {
  if (state === 1) {
    return "专家评语: ";
  }
  if (state === 3) {
    return "失败原因: ";
  }
  return "";
};

const handleEdit = (item) => {
  uni.navigateTo({
    url: `/pagesMerchand/auth-detail?id=${item.id}`,
  });
};

const handleDel = async (item) => {
  const res = await commodityRemoveCollection({
    id: item.id,
  });
  if (res.code === 200) {
    toast("删除成功");
    pageNum.value = 1;
    isMore.value = false;
    pageSize.value = 10;
    list.value = [];
    getList();
  }
};

const handleAdd = () => {
  uni.navigateTo({
    url: `/pagesMerchand/auth-detail`,
  });
};

// 监听页面滚动
onPageScroll((e: any) => {});

onReachBottom((e: any) => {
  if (isMore.value) {
    pageNum.value++;
    getList();
  }
});

onLoad(() => {});

onShow(() => {
  pageNum.value = 1;
  isMore.value = false;
  pageSize.value = 10;
  list.value = [];
  getList();
});

onMounted(() => {});
</script>

<template>
  <navbar :fixed="navbarFixed" title="奇石认证" />
  <view class="container-list" v-if="list.length>0">
    <view class="empty"></view>
    <view class="item" v-for="item in list" :key="item.id">
      <view class="top">
        <view class="left">
          <image class="avatar" :src="item?.images?.split(',')?.[0]" />
        </view>
        <view class="right">
          <view class="name">{{ item.title }}</view>
          <view
            class="status"
            :style="{
              color: getStatusInfo(item.authentication)?.color,
              border: `1rpx solid ${getStatusInfo(item.authentication)?.color}`,
            }"
            >{{ getStatusInfo(item.authentication)?.text }}</view
          >
          <view class="time">认证时间：{{ item.updateTime }}</view>
        </view>
      </view>
      <view class="line"></view>
      <view
        class="reason"
        :style="{
          color: getStatusInfo(item.authentication)?.color,
        }"
        v-if="item.remark"
        >{{ getReasonPrefix(item.authentication) }}{{ item.remark }}</view
      >
      <view
        class="edit-btn btn"
        v-if="handleBtnShow(item.authentication)?.edit"
        @click="handleEdit(item)"
      >
        <image class="icon" src="@/static/images/edit-card.png" />
        <text class="text">编辑</text>
      </view>
      <view
        class="del-btn btn"
        v-if="handleBtnShow(item.authentication)?.del"
        @click="handleDel(item)"
      >
        <image class="icon" src="@/static/images/del-card.png" />
        <text class="text">删除</text>
      </view>
    </view>

    <!-- <view class="btn-group">
      <view class="add-btn" @click="handleAdd">
        <image class="icon" src="@/static/images/add-card.png" />
        <text class="text">添加认证</text>
      </view>
    </view> -->
  </view>
  <noneBox v-if="list.length <= 0"></noneBox>

</template>

<style lang="scss" scoped>
.container-list {
  position: relative;
  background: #ececec url("@/static/images/publish-bg.png") no-repeat;
  background-size: 750rpx 375rpx;
  padding-bottom: 140rpx;

  .empty {
    height: 1rpx;
    background: transparent;
  }

  .item:nth-child(1) {
    margin-top: 0 !important;
  }
  .item {
    width: 690rpx;
    height: 323rpx;
    background: #ffffff;
    border-radius: 16rpx;
    margin: 30rpx 0 0 30rpx;
    position: relative;

    .top {
      display: flex;
      padding: 26rpx 24rpx;
      .left {
        width: 126rpx;
        height: 126rpx;
        border-radius: 12rpx;
        .avatar {
          width: 126rpx;
          height: 126rpx;
          border-radius: 12rpx;
        }
      }
      .right {
        flex: 1;
        padding-left: 21rpx;
        .name {
          margin-top: 4rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #000000;
          line-height: 30rpx;
          font-style: normal;
        }
        .status {
          border-radius: 4rpx;
          margin-top: 14rpx;
          display: inline-block;
          padding: 2rpx 8rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 22rpx;
          line-height: 30rpx;
        }
        .time {
          font-family: OPPOSans, OPPOSans;
          font-weight: normal;
          font-size: 22rpx;
          color: #999999;
          line-height: 22rpx;
          font-style: normal;
          margin-top: 24rpx;
        }
      }
    }

    .line {
      width: 643rpx;
      height: 1rpx;
      background: #eeeeee;
      margin-left: 24rpx;
    }

    .reason {
      font-family: OPPOSans, OPPOSans;
      font-weight: normal;
      font-size: 22rpx;
      line-height: 22rpx;
      font-style: normal;
      margin-top: 12rpx;
      padding: 0 24rpx;
    }

    .edit-btn {
      position: absolute;
      right: 203rpx;
    }

    .del-btn {
      position: absolute;
      right: 23rpx;
    }

    .btn {
      bottom: 20rpx;
      width: 160rpx;
      height: 68rpx;
      background: #ffffff;
      border-radius: 36rpx;
      border: 1rpx solid #dedede;
      display: flex;
      .icon {
        width: 32rpx;
        height: 32rpx;
        margin-left: 36rpx;
        margin-top: 18rpx;
      }
      .text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;
        line-height: 24rpx;
        font-style: normal;
        margin-left: 8rpx;
        margin-top: 22rpx;
      }
    }
  }

  .btn-group {
    height: 120rpx;
    background: #ffffff;
    padding: 10rpx 40rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .add-btn {
      width: 670rpx;
      height: 100rpx;
      background: #c7452f;
      border-radius: 50rpx;
      display: flex;
      .icon {
        width: 34rpx;
        height: 34rpx;
        margin-left: 238rpx;
        margin-top: 33rpx;
      }
      .text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 36rpx;
        color: #ffffff;
        line-height: 50rpx;
        text-align: right;
        font-style: normal;
        margin-left: 14rpx;
        margin-top: 25rpx;
      }
    }
  }
}
</style>
